<template>
  <tiny-dialog-box
      v-model:visible="props.shows"
      :width="boxWidth"
      draggable
      top="10px"
      destroy-on-close
      :modal="false"
      :show-header="showHeader"
      :fullscreen="fullscreen"
  >
    <template #title>
      {{title}}
    </template>
    <div :style="{height: boxHeight}" class="content">
      <slot></slot>
    </div>
    <div style="display: flex;height: 70px;line-height: 70px;" v-if="footBtns.length > 0">
      <div style="flex: 1; text-align: center;display: flex;">
        <div class="btn" v-for="(btn, index) in btns" :key="'btn'+index">
          <JButton size="medium">{{btn.title}}</JButton>
        </div>
      </div>
      <div style="width: 100px;">
        <JButton @click="close" size="medium">关闭</JButton>
      </div>
    </div>
  </tiny-dialog-box>
</template>

<script setup>
import {ref, computed} from "vue";
import {TinyDialogBox} from "@opentiny/vue";
import XForm from "@/lui/XForm.vue";
const props = defineProps({
  showHeader: {type: Boolean, default: true},
  fullscreen: {type: Boolean, default: false},
  shows: {type: Boolean, default: false},
  width: {type: [String, Number], default: 800},
  height: {type: [String, Number], default: ''},
  title: {type: String, default: 'title'},
  footBtns: {type: Array, default: () => {return []}},

})
const show = defineModel()
const fApi = ref({})
const formModel = ref({})
const formRules = ref([])
const btns = ref([])

const boxWidth = computed(() => {
  if(typeof props.width === 'string') {
    return props.width
  }
  return props.width + 'px'
})
const boxHeight = computed(() => {
  if(typeof props.height === 'string') {
    return props.height
  }
  return props.height + 'px'
})

const open = () => {
  show.value = true
}
const close = () => {
  show.value = false
}
defineExpose({open})

</script>
<style scoped lang="scss">
.content {
  overflow: auto;
  box-sizing: border-box;
}
.btn {
  margin-right: 20px;
}
</style>